<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram Fig. 3.4</title>
</head>
<body>
<canvas id="circuitCanvas" width="450" height="380"></canvas>

<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '20px serif';

    // Define main coordinates for the circuit box
    const x1 = 50, y1 = 50;  // Top-left corner
    const x2 = 350, y2 = 280; // Bottom-right corner
    const midX = (x1 + x2) / 2;
    const midY = (y1 + y2) / 2;

    // Define component-specific coordinates
    const r_start_x = 120;
    const r_end_x = 280;
    const R_start_y = y1 + 60;
    const R_end_y = y2 - 60;
    const battery_top_y = midY - 15;
    const battery_bottom_y = midY + 15;

    // --- Draw Solid Wires ---
    ctx.beginPath();
    // Bottom wire
    ctx.moveTo(x1, y2);
    ctx.lineTo(x2, y2);
    // Left wire (connecting to battery)
    ctx.moveTo(x1, y2);
    ctx.lineTo(x1, battery_bottom_y);
    ctx.moveTo(x1, battery_top_y);
    ctx.lineTo(x1, y1);
    // Top wire (connecting to resistor r)
    ctx.lineTo(r_start_x, y1);
    ctx.moveTo(r_end_x, y1);
    ctx.lineTo(x2, y1);
    ctx.stroke();

    // --- Draw Voltage Source (V) ---
    ctx.beginPath();
    // Positive terminal (longer line)
    ctx.moveTo(x1 - 15, battery_top_y);
    ctx.lineTo(x1 + 15, battery_top_y);
    // Negative terminal (shorter line)
    ctx.moveTo(x1 - 10, battery_bottom_y);
    ctx.lineTo(x1 + 10, battery_bottom_y);
    ctx.stroke();
    // Label for V
    ctx.fillText('V', x1 + 20, midY + 8);

    // --- Draw Internal Resistor (r) ---
    ctx.beginPath();
    ctx.moveTo(r_start_x, y1);
    ctx.lineTo(r_start_x + 20, y1 + 10);
    ctx.lineTo(r_start_x + 40, y1 - 10);
    ctx.lineTo(r_start_x + 60, y1 + 10);
    ctx.lineTo(r_start_x + 80, y1 - 10);
    ctx.lineTo(r_start_x + 100, y1 + 10);
    ctx.lineTo(r_start_x + 120, y1 - 10);
    ctx.lineTo(r_start_x + 140, y1 + 10);
    ctx.lineTo(r_end_x, y1);
    ctx.stroke();
    // Label for r
    ctx.fillText('r', midX, y1 + 30);

    // --- Draw Terminals (A, B) ---
    // Terminal A
    ctx.beginPath();
    ctx.arc(x2, y1, 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('A', x2 + 10, y1 + 5);
    // Terminal B
    ctx.beginPath();
    ctx.arc(x2, y2, 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('B', x2 + 10, y2 + 5);

    // --- Draw Dashed Path and Load Resistor (R) ---
    // Dashed line from A to the start of R
    ctx.beginPath();
    ctx.setLineDash([6, 4]);
    ctx.moveTo(x2, y1);
    ctx.lineTo(x2, R_start_y);
    ctx.stroke();

    // Load Resistor R (solid line)
    ctx.setLineDash([]); // Reset to solid line for the component
    ctx.beginPath();
    ctx.moveTo(x2, R_start_y);
    ctx.lineTo(x2 + 10, R_start_y + 15);
    ctx.lineTo(x2 - 10, R_start_y + 35);
    ctx.lineTo(x2 + 10, R_start_y + 55);
    ctx.lineTo(x2 - 10, R_start_y + 75);
    ctx.lineTo(x2, R_end_y);
    ctx.stroke();
    // Label for R
    ctx.fillText('R', x2 - 40, midY);

    // Dashed line from the end of R to B
    ctx.beginPath();
    ctx.setLineDash([6, 4]);
    ctx.moveTo(x2, R_end_y);
    ctx.lineTo(x2, y2);
    ctx.stroke();

    // Reset line dash to solid for any subsequent drawing
    ctx.setLineDash([]);

    // --- Draw Figure Caption ---
    ctx.font = 'bold 22px serif';
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 3.4', midX, y2 + 60);

</script>
</body>
</html>